<template>
  <div class="mb-48">
    <div
      class="header-title p-0-16 click cursor-pointer"
      @click="jumpPage(obj)"
    >
      <div class="point mr-8"></div>
      <p class="title">{{ obj.channel_name }}</p>
      <p class="ml-auto more">{{ $t('see_more') }}</p>
      <icon size="16px" name="ic_arrow_right_red" />
    </div>
    <div class="list">
      <news-info-big
        v-for="(item, i) in listData.slice(0, 2)"
        :key="i"
        :obj="item"
        class="item"
      />
    </div>

    <div v-if="type == 0" class="list flex-wrap">
      <news-info-small
        v-for="(item, i) in listData.slice(2)"
        :key="i"
        :obj="item"
        class="item"
      />
    </div>
    <div v-if="type == 1" class="list">
      <NewsInfoTitle
        v-for="(item, i) in listData.slice(2)"
        :key="i"
        :obj="item"
        class="item"
      />
    </div>
    <div v-if="type == 2" class="list">
      <news-info-big
        v-for="(item, i) in listData.slice(2)"
        :key="i"
        :obj="item"
        class="item"
      />
    </div>
  </div>
</template>

<script>
import NewsInfoSmall from './NewsInfoSmall.vue';
import NewsInfoBig from './NewsInfoBig.vue';
import NewsInfoTitle from './NewsInfoTitle.vue';

export default {
  components: { NewsInfoSmall, NewsInfoBig, NewsInfoTitle },
  props: {
    obj: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: 0
    }
  },

  computed: {
    type() {
      return this.index % 3;
    },

    listData() {
      let listData;
      const list = this.obj.content_list;
      switch (this.type) {
        case 0:
          listData = list.slice(0, 6);
          break;
        case 1:
          listData = list.slice(0, 8);
          break;
        case 2:
          listData = list.slice(0, 4);
          break;
      }
      return listData;
    }
  },

  methods: {
    jumpPage({ channel_id, channel_type }) {
      if (channel_type == 1) {
        this.$router.push({
          path: this.localePath(`/m/topic/${channel_id}`, this.$i18n.locale)
        });
        return;
      }

      this.$router.push({
        path: this.localePath(`/m/channel/${channel_id}`, this.$i18n.locale)
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.header-title {
  height: 32px;
  display: flex;
  align-items: center;
  .point {
    width: 4px;
    height: 16px;
    background: #fa4646;
    border-radius: 2px;
  }

  .title {
    font-size: 20px;
    color: #0c0c1c;
    letter-spacing: 0;
    line-height: 32px;
    font-weight: 500;
  }

  .more {
    font-size: 14px;
    color: rgba(12, 12, 28, 0.7);
  }
}

.list {
  display: flex;
  flex-wrap: wrap;
}
</style>
